<template>
	<!-- 外层容器 -->
	<view class="_focus-body-shell-class" :style="styleBody">
		<!-- 子级插槽 -->
		<slot></slot>
	</view>
</template>


<script>
	/**
	 * 页面page容器
	 * @description vue/nvue通用，模拟Web端的body标签功能，初始高度为页面窗口高度。注：组件自身无滚动条
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-body
	 * @property {String} mode = [auto|fix] 容器高度变化模式，默认：auto
	 *   @value auto 高度会随着内容自动变化(默认)
	 *   @value fix 高度固定为窗口高度，不会变化
	 * @property {String} bg 背景颜色，十六进制RGB值，如：#FFFFFF。不填则使用主题文件默认配置
	 */
	export default {
		name: "focus-body",
		// 传递数据
		props: {
			"tag": { type: String, default: 'focus-body' },
			"mode": { type: String, default: 'auto' },
			"bg": { type: String, default: '' },
		},
		
		// 页面数据
		data() {
			return {
				// 状态信息
				state: {
					isNvue: false, // 是否是weex编译文件
					isAndroid: false, // 是否是安卓平台
				},
				// 系统信息
				windowHeight: 0, // 可使用窗口高度(px)
			}
		},
		
		// 实例创建完成
		created() {
			// #ifdef APP-NVUE
			// nvue页面标识
			this.state.isNvue = true;
			// 锁定屏幕方向为竖向
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},
		
		// 实例挂载完毕
		mounted() {
			// 获取平台信息
			uni.getSystemInfo({
				success: (sysD) => {
					// 判断是否为安卓平台
					this.state.isAndroid = sysD.platform=='ios' ? false : true;
					// 系统信息 赋值
					this.windowHeight = sysD.windowHeight;
				}
			});
		},
		
		// 计算属性
		computed: {
			// 容器style属性
			styleBody() {
				// 初始化
				var obj_style = {};
				var str_style = '';
				
				// ====================================== 屏幕宽高
				// 可使用窗口高度
				if (Number(this.windowHeight) > 0)
				{
					// 容器高度变化模式 = fix，设定高度height值
					if (this.mode == 'fix') { obj_style['height'] = this.windowHeight + 'px'; }
					// 容器高度变化模式 = auto，设定最小高度min-height值
					else {
						// nvue模式下
						if (this.state.isNvue) { obj_style['min-height'] = this.windowHeight + 'px'; }
						// vue模式下
						else { obj_style['min-height'] = this.windowHeight + 'px'; }
					}
				}
				
				// ======================================= 背景颜色(16进制)
				if (this.bg && (this.bg.indexOf('#')>=0 || this.bg.indexOf('rgba')>=0))
				{
					obj_style['background-color'] = this.bg;
				}
				
				// 循环样式对象
				for (let k in obj_style) { str_style += k + ':' + obj_style[k] + ';'; }
				// 结果返回
				return str_style;
			}
		},
		
	}
</script>


<style lang="scss">
	/* 外层容器 */
	._focus-body-shell-class{
		width: 750rpx; background-color: $focus-color-background;
		/* #ifndef APP-NVUE */
		display: flex; box-sizing: border-box; overflow: hidden;
		/* #endif */
		flex-direction: column; justify-content: flex-start; align-items: stretch;
	}
</style>